<script setup>
import {defineExpose, ref, toRefs, watch} from "vue";
import {exportExcel, getAllAchievementByLevel} from "@/api/achievement";
// 获取父组件传递的数据
const props = defineProps({
  exportData: {
    type: Array,
    required: true,
  },
  selectedIds: {
    type: Array,
    required: true,
  }
});
const emit = defineEmits(['clearSelection']);
// Cake: 直接解构props得到的只是数值，不是引用不会响应式变化
const {exportData, selectedIds} = toRefs(props);
const data = ref(exportData.value);
const ids = ref(selectedIds.value);
watch(exportData, () => {data.value = exportData.value});
watch(selectedIds, () => {ids.value = selectedIds.value});

const levelOptions = ["国际级", "国家级", "省级", "市级", "校级"].map(item => ({label: item, value: item}))
const levelSelected = ref('');
watch(levelSelected, async () => {
  const res = await getAllAchievementByLevel([levelSelected.value])
  if(!res.data) return;
  console.log(res)
  data.value = res.data.data;
  ids.value = res.data.data.map(item => item.id);
})

//设置可见性
const visible = ref(false);
const openDialog = () => {
  visible.value = true;
}
defineExpose({
  openDialog
})
const closeDialog = () => {
  visible.value = false;
}
const reset = () => {
  data.value = [];
  ids.value = [];
  levelSelected.value = ''
}
const doExport = async () => {
  const res = await exportExcel(ids.value);
  downloadFile(res.data);
  handleBeforeClose();
}
// 下载导出文件
const downloadFile = (data) => {
  if (!data) {
    return
  }
  const link = document.createElement('a');
  let blob = new Blob([data], {type: 'application/vnd.ms-excel'});
  link.style.display = 'none';
  link.href = URL.createObjectURL(blob);

  link.setAttribute('download', '实践成果表' + '.xls');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

const handleBeforeClose = () => {
  reset()
  emit('clearSelection')
  closeDialog();
}

</script>

<template>
  <el-dialog width="90%" v-model="visible" :before-close="handleBeforeClose">
    <template #header="{titleId, titleClass}">
      <span :id="titleId" :class="titleClass" style="margin-right: 10px;">导出表格</span>
      <el-select
          v-model="levelSelected"
          placeholder="按项目等级导出"
          style="width: 150px"
      >
        <el-option
            v-for="item in levelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </template>
    <el-table :data="data" v-model="visible" height="450" width="100%">
      <el-table-column property="achieveTime" label="时间" width="120"></el-table-column>
      <el-table-column property="title" label="项目名称" width="200"></el-table-column>
      <el-table-column property="level" label="项目等级" width="120"></el-table-column>
      <el-table-column
          property="possessorName"
          label="项目持有者"
          width="250"
      ></el-table-column>
      <el-table-column
          property="advisorName"
          label="指导老师"
          width="200"
      ></el-table-column>
      <el-table-column property="description" label="项目简介" width="1000"></el-table-column>
    </el-table>
    <div class="buttonBox">
      <el-button @click="closeDialog">取消导出</el-button>
      <el-button type="success" @click="doExport">导出为Excel</el-button>
    </div>
  </el-dialog>
</template>

<style scoped lang="less">
.buttonBox {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
